<template>
    <section>
        <slot>
        </slot>
        <ul>
            <router-link v-for='(item) in courseList' :key='item.courseId'
                         :to="{path:'/myIndex/detail',query:{courseid:item.courseId}}" tag="li" style="position: relative">
                <a target="_blank">
                    <img :src="item.bannerFileUrl" alt="">
                </a>
                <a target="_blank">{{item.courseTitle}}</a><br>
                <span>共{{item.subSectionNum}}节课 | {{item.learningNum}}人报名</span><br>
                <span v-if='getPrice(item.isFree)'>免费</span>
                <div v-else>
                        <span style="color:red">
                            ￥{{item.discountPrice}}
                        </span>
                    <span style="color:#999;font-size:12px;text-decoration: line-through;margin-left:4px">
                            ￥{{item.coursePrice}}
                        </span>
                </div>
                <span class="discount" v-if="item.discountDesc?true:false">{{item.discountDesc}}</span>
<!--                <span v-else style="display: none"></span>-->
            </router-link>
        </ul>
    </section>
</template>

<script>
    export default {
        name: "Course",
        data() {
            return {
                courseList: [],
                flag: "",
            }
        },
        methods: {
            getHref: function (val) {
                return "index.html#/detail?id=" + val + "&keyword=&courseType=&type="
            },
            getPrice: function (isFree) {
                if (isFree == 1) {
                    return this.flag = true
                } else {
                    return this.flag = false
                }
            }
        },
        props: {
            coursetype: {
                type: String,
                // 默认free
                default: 'free'
            },
            pagesize: {
                type: [Number, String],
                default: 5
            }
        },
        created() {
            let form = new URLSearchParams();
            form.append('type', this.coursetype);
            form.append('pageNum', 1);
            form.append('pageSize', this.pagesize)
            this.$axios
                .post(
                    "http://wkt.myhope365.com/weChat/applet/course/list/type",
                    form
                ).then((res) => {
                console.log(res);
                this.courseList = res.data.rows;
                console.log(this.courseList);
            });
        }
    }
</script>

<style scoped>
    /* 免费课程开始 */
    /* 免费课程标题开始 */
    body>section ul>li>a:nth-child(2){
        display: block;
        width: 100%;
        white-space:nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .freeTitle{
        border-bottom: 2px solid #e7e7e7;
        position: relative;
        text-align: center;
        margin-top: 30px;
        width: 1196px;
        height: 48px;
        padding: 0 12px 10px 0px;
        box-sizing: border-box;
        /* background-color: #00cf8c; */
    }
    .freeTitle>span:nth-child(1){
        font-size: 24px;
    }
    .moreCourse{
        color: #999999;
        overflow: hidden;
        position: absolute;
        right: 0;
    }
    .moreCourse>div{
        text-align: center;
        line-height: 13px;
        float: right;
        margin-left: 4px;
        margin-top: 3px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2px solid #999999;
    }
    /* 免费课程标题结束 */
    section{
        margin: auto;
        width: 1200px;
    }
    section>ul{
        overflow: hidden;
    }
    section>ul>li{
        padding: 8px;
        box-sizing: border-box;
        float: left;
        width: 240px;

    }
    section>ul>li>a:nth-child(2):hover{
        color: #00cf8c;
    }
    section>ul>li>a{
        color: black;

    }
    section>ul>li>a:visited{
        color: black;
    }
    section>ul>li>a:nth-child(1){
        display: block;
        width: 100%;
        height: 112px;
        overflow: hidden;
    }
    /* 放大图片 */
    section>ul>li>a:nth-child(1)>img{
        width: 125%;
        height: 125%;
        margin-left: -28px;
        margin-top: -14px;
        transform: scale(0.8,0.8);
        transition-duration: 0.5s;

    }
    section>ul>li>a:nth-child(1):hover>img{
        transform:none;
    }


    section>ul>li>span:nth-child(4){
        font-size: 14px;
        color: #888888;
    }
    section>ul>li>span:nth-child(6){
        font-size: 15px;
        color: #00CF8c;
    }
    /* 免费课程结束 */

    .boutiquePrice{
        margin-right: 6px;
        color: red!important;
    }
    .discountPrice{
        color: #888888;
        text-decoration: line-through;
    }
    /* 限时钜惠 */
    .discount{
        padding: 2px 6px 0 6px;
        position: absolute;
        right: 14px;
        bottom: 8px;
        /*display: block;*/
        font-size: 12px;
        color: #fa8c16!important;
        background: #fff7e6;
        border: 1px solid #ffd591;
    }
</style>